<template>
  <div id="OrderTotal" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'OrderTotal',
  mounted() {
    this.LoadingOrderTotal()
  },
  methods: {
    LoadingOrderTotal() {
      const chartDom = document.getElementById('OrderTotal')
      const myChart = echarts.init(chartDom)

      const option = {
        title: [{
          text: '单位:  笔',
          textStyle: {
            fontSize: 14,
            color: '#818693',
            fontWeight: 'normal'

          }

        },
        {
          text: '74,423',
          left: 110,
          top: 60,
          textStyle: {
            fontSize: 28,
            color: '#e15536',
            fontWeight: 700

          }
        },
        {
          text: '订单最高值',
          left: 120,
          top: 95,
          textStyle: {
            fontSize: 14,
            color: '#818693',
            fontWeight: 400

          }
        },
        {
          text: '25,661',
          left: 350,
          top: 60,
          textStyle: {
            fontSize: 28,
            color: '#e15536',
            fontWeight: 700

          }
        },
        {
          text: '订单平均值',
          left: 360,
          top: 95,
          textStyle: {
            fontSize: 14,
            color: '#818693',
            fontWeight: 400

          }
        },
        {
          text: '12,244',
          left: 590,
          top: 60,
          textStyle: {
            fontSize: 28,
            color: '#e15536',
            fontWeight: 700

          }
        },
        {
          text: '订单最低值',
          left: 600,
          top: 95,
          textStyle: {
            fontSize: 14,
            color: '#818693',
            fontWeight: 400

          }
        }
        ],

        tooltip: {
          trigger: 'axis'
          //   show: false

        },
        // legend: {
        //   data: ['销量']
        // },
        grid: {
          height: '50%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '35%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          type: 'line',
          data: [12244, 12244, 13312, 13312, 14132, 14132, 15532, 15532, 24322, 24322, 74423, 74423],
          smooth: false,
          symbol: 'circle',
          itemStyle: {
            color: '#f85c38', // 设置圆点的填充颜色为白色
            borderColor: '#f85c38', // 设置圆点的边框颜色为黑色
            borderWidth: 3 // 设置圆点的边框宽度为0，即去掉边框
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0, color: '#fff' // 0% 处的颜色
                },
                {
                  offset: 0.5, color: '#fdf0ed' // 100% 处的颜色
                },
                {
                  offset: 1, color: '#fce8e3' // 100% 处的颜色
                }],
              global: false

            }
          }
        }
        ]
      }

      myChart.setOption(option)
    }
  }
}

</script>
<style scoped>
#OrderTotal{
    width: 100%;
    height: 600px;

}
</style>
